
import React from 'react'
import { Button, Table,Popconfirm,message } from 'antd';
import { withRouter } from 'react-router-dom';
import {inject,observer} from "mobx-react"





@inject('xinJianYouHuiJuan')
@observer
@withRouter
class ViewCoupons extends React.Component {


    constructor(){
        super()
        this.state={
            tabData : []
        }
    }
    selTabData(){//请求表格数据
        this.props.xinJianYouHuiJuan.updateTabData().then(data=>{
            this.setState({tabData:data})
        })
    }

    componentWillMount(){//生命周期：挂在前
        this.selTabData()
    }

    state = {
        selectedRowKeys: [], // Check here to configure the default column
    };

    onSelectChange = selectedRowKeys => {
        console.log('selectedRowKeys changed: ', selectedRowKeys);
        this.setState({ selectedRowKeys });
    };

    haha = () => {
        this.props.history.push('/Home/cuXiao/CouPon/YongHu')
    }

    render() {
        function tiaoZhuan(row){
            // this.props.xinJianYouHuiJuan.selDanZhangYouHuiJuan(row).then(data=>{
            //     data === 200 ? this.props.history.push('/Home/cuXiao/CouPon/ViewCoupons?id=1&type=5') : message.error("出错了请稍后再试")
            // })
            this.props.history.push(`/Home/cuXiao/CouPon/ViewCoupons?id=${row.couponId}&type=${row.couponType}`)
        }
        const { selectedRowKeys } = this.state;
       

        let pagination = {//分页器
            defaultPageSize: 5,
        }

        function faFang(row) {//发放
            this.props.xinJianYouHuiJuan.selGoodsType()
            this.props.xinJianYouHuiJuan.selTypeGoodsList('')
            this.props.xinJianYouHuiJuan.updatefaFangData(row)
            this.props.history.push(`/Home/cuXiao/CouPon/LssueCoupons?couponType=${row.couponType}`)
        }

        let xiuGai = (row) => {//修改
            let {insertStart} = this.props.xinJianYouHuiJuan
            insertStart('updateData',row)
            this.props.history.push('/Home/cuXiao/CouPon/NewCoupons')
        }

        let queRenClick = (couponId)=>{//点击确认删除到mobx去删除
            return this.props.xinJianYouHuiJuan.delTabData(couponId).then(data=>{
                if(data === 200){
                    this.selTabData()
                }else{
                    message.warning('系统开小差')
                }
            })
        }

        let quXiaoClick = ()=>{//点击取消

        }

        const columns = [
            {
                key:'couponId',
                align:'center',
                title: '优惠劵名称',
                dataIndex: 'couponName',
            },
            {
                key:'couponId',
                align:'center',
                title: '类型',
                dataIndex: 'couponType',
                render:(type)=>{
                    if(type === 1) return '用户发放'
                    else if(type === 2) return '商品发放'
                    else if(type === 3) return '线下发放'
                    else if(type === 4) return '关注发放'
                    else if(type === 5) return '订单发放'
                    else if(type === 6) return '团长发放'
                    else if(type === 7) return '积分发放'
                }
            },
            {
                key:'couponId',
                align:'center',
                title: '金额',
                dataIndex: 'couponAmount',
            },
            {
                key:'couponId',
                align:'center',
                title: '订单下限',
                dataIndex: 'couponLol',
            },
            {
                key:'couponId',
                align:'center',
                title: '发放数量',
                dataIndex: 'coupon_qi',
            },
            {
                key:'couponId',
                align:'center',
                title: '使用数量',
                dataIndex: 'coupon_ua',
            },
            {
                key:'couponId',
                align:'center',
                title: '有效日期',
                dataIndex: 'couponId',
                render:(couponId,row,key)=>{
                    return <span>
                        {new Date(row.couponEd).toLocaleString()}<br />
                        {new Date(row.couponEdf).toLocaleString()}
                    </span>
                }
            },
            
            {
                key:'couponId',
                align:'center',
                title: '操作',
                dataIndex:"couponId",
                render: (couponId,row,key) => (
                    <>
                        <Button type="primary" onClick={tiaoZhuan.bind(this,row)}>查看</Button>
                        <Button type="primary" onClick={faFang.bind(this,row)}>发放</Button>
                        <Button type="primary" onClick={xiuGai.bind(this,row)} >修改</Button>
                        <Popconfirm onConfirm={queRenClick.bind(this,couponId)} onCancel={quXiaoClick} title="确认删除" okText="是" cancelText="取消">
                            <Button type="primary" danger>删除</Button>
                        </Popconfirm>
                    </>
                ),
            },
        ];
        return (
            <div>
                <h1>优惠卷管理</h1>
                <Table pagination={pagination} columns={columns} dataSource={this.state.tabData} />
            </div>
        )
    }
}

export default ViewCoupons
